<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../manager/base.jsp"%>
<script type="text/javascript" src="${ctx}/layui/layui.all.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/layui/css/layui.css">
<script type="text/javascript" src="${ctx}/js/layui_common.js"></script>
<!-- 上传图片所需要的css,js -->
<link href="${ctx}/css/uploadcss/iconfont.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/css/uploadcss/fileUpload.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctx}/js/uploadjs/fileUpload.js"></script>
<!-- end 上传图片所需要的css,js -->
<script type="text/javascript">
$(function() {
	//自适应屏幕宽度
	var main_h = $(window).height();
	$('.hy_list').css('height', main_h - 45 + 'px');

	var main_w = $(window).width();
	$('.xjhy').css('width', main_w - 40 + 'px');

	$(".tabBox .tabCont:first").css("display", "block");
	$(".tabBox .tabNav li").click(
			function() {
				$(this).siblings("li").removeClass("now");
				$(this).addClass("now");
				$(this).parents(".tabBox").find(".tabCont").css("display",
						"none");
				var i = $(this).index();
				$(this).parents(".tabBox").find(".tabCont:eq(" + i + ")")
						.css("display", "block");
			});

	$('.xial_m span').click(function() {
		$(this).parent('.xial_m').siblings('.xl_ctn').toggle();
	});
});
<!--框架高度设置-->
</script>
<script type="text/javascript">
$(function(){
	getPjInfoByParam('','');
	var selectHtml = getAllPjinfoInfo('');
	$("select[name='device_name']").html(selectHtml);
});

function getAllPjinfoInfo(id) {
	var optionHtml = "<option value=\"\">请选择</option>";
	$.ajax({
				url : '${ctx}/basicsData/getAllBasicsDataInfo',
				data : {},
				type : 'get',
				async : false,
				dataType : 'json',
				success : function(data) {
					if (data != null) {
						$.each(
										data,
										function(index, item) {
											if (item.id == id) {
												optionHtml += '<option value="'+item.id+'" selected="selected">'
														+ item.name
														+ '</option>';
											} else {
												optionHtml += '<option value="'+item.id+'">'
														+ item.name
														+ '</option>';
											}
											
										})

					}
				}
			});
	return optionHtml;
}

function getPjInfoByParamByName(){
	var name = $("input[name='name']").val();
	getPjInfoByParam(name);
}

function getPjInfoByParam(name){
	var i;
	$.ajax({
		url:'${ctx}/pjinfo/getPjInfoByParam',
		data:{"name":name},
		type:'get',
		dataType:'json',
		beforeSend: function () {  
			i = layer.open({
				type:3,
				area:'500px',
				skin:'layui-layer-molv',
				shade:0.5,
				shadeClose:true,
				maxmin:true
			});
       	},
		success:function(data){
			layer.close(i);
			$("#qrcodeInfo").html("");
			if(data != null){
				$.each(data,function(index, item){
					var html = "";
					html += "<tr>";
					html += "<td>"+item.name+"</td>";
					html += "<td>"+item.pxtcode+"</td>";
					if(item.pxtimg == "" && item.pxttwoimg == undefined){
						html += "<td></td>";
					}else if(item.pxttwoimg == undefined){
						html += "<td><img src=\""+item.pxtimg+"\" style=\"width:20px;height:20px;\"/></td>";
					}else if(item.pxtimg != "" && item.pxttwoimg != undefined){
						html += "<td><img src=\""+item.pxtimg+"\" style=\"width:20px;height:20px;\"/><img src=\""+item.pxttwoimg+"\" style=\"width:20px;height:20px;\"/></td>";
					}
					html += "<td>"+item.jxtcode+"</td>";
					if(item.jxtimg == ""){
						html += "<td>"+item.jxtimg+"</td>";
					}else{
						html += "<td><img src=\""+item.jxtimg+"\" style=\"width:20px;height:20px;\"/></td>";
					}
					html += "<td>";
					html += "<a href=\"javascript:void(0);\" class=\"btn\" onclick=\"updatePjInfo('"+item.uuid+"')\">修改</a>";
					html += "<a href=\"javascript:void(0);\" class=\"btn\" onclick=\"deletePjInfo('"+item.uuid+"')\">删除</a>";
					html += "</td>";
					html += "</tr>";
					$("#qrcodeInfo").append(html);
				});
			}
			//添加分页
			//计算总数
			var total = 0;
			if(data == null){
				total = 0;
			}else if(data.length == 0 || data[0].cnt == null || data[0].cnt == "" || data[0].cnt == undefined){
				total = 0;
			}else{
				total = data[0].cnt;
			}
			//定义一个laypage实例
			var laypage = layui.laypage;
			laypage.render({
				elem : 'r_foot_m', //注意，这里的 test1 是 ID，不用加 # 号
				count: total,
				prev:'上一页',
				next:'下一页',
				cont: 'claimpage',
				skin: 'yahei',
				jump:function(obj,first){
					if(first!=true){//是否首次进入页面
						var currentPage = obj.curr;//获取点击的页码
						//通过当前页数，获取对应的数据
						$.ajax({
							url:'${ctx}/pjinfo/getPjInfoByParam',
							data:{"name":name,"page":currentPage},
							type:'get',
							dataType:'json',
							beforeSend: function () {  
				                i = layer.open({
									type:3,
									area:'500px',
									skin:'layui-layer-molv',
									shade:0.5,
									shadeClose:true,
									maxmin:true
									});    
				            },  
							success:function(data){
								layer.close(i);
								$("#qrcodeInfo").html("");
								if(data != null){
									$.each(data,function(index, item){
										var html = "";
										html += "<tr>";
										html += "<td>"+item.name+"</td>";
										html += "<td>"+item.pxtcode+"</td>";
										if(item.pxtimg == "" && item.pxttwoimg == undefined){
											html += "<td></td>";
										}else if(item.pxttwoimg == undefined){
											html += "<td><img src=\""+item.pxtimg+"\" style=\"width:20px;height:20px;\"/></td>";
										}else if(item.pxtimg != "" && item.pxttwoimg != undefined){
											html += "<td><img src=\""+item.pxtimg+"\" style=\"width:20px;height:20px;\"/><img src=\""+item.pxttwoimg+"\" style=\"width:20px;height:20px;\"/></td>";
										}
										html += "<td>"+item.jxtcode+"</td>";
										if(item.jxtimg == "暂无图片"){
											html += "<td>"+item.jxtimg+"</td>";
										}else{
											html += "<td><img src=\""+item.jxtimg+"\" style=\"width:20px;height:20px;\"/></td>";
										}
										html += "<td>";
										html += "<a href=\"javascript:void(0);\" class=\"btn\" onclick=\"updatePjInfo('"+item.uuid+"')\">修改</a>";
										html += "<a href=\"javascript:void(0);\" class=\"btn\" onclick=\"deletePjInfo('"+item.uuid+"')\">删除</a>";
										html += "</td>";
										html += "</tr>";
										$("#qrcodeInfo").append(html);
									});
								}
							}
						});
					}
				}
			});
		}
	});
}
</script>
<script type="text/javascript">
//打开弹框
var index ;
function updatePjInfo(uuid){
	//通过id查询角色信息
	$.ajax({
		url:'${ctx}/pjinfo/getPjInfoByParam',
		data:{"uuid":uuid},
		type:'get',
		dataType:'json',
		async:false,
		success:function(data){
			//添加下拉内容
			$.each(data,function(index, item){
				if(data!=null){
					var html = "";
					html += '<div class="tabCont">';
					html += '<input type="hidden" id="updateuuid" value="'+item.uuid+'"/>';
					html += '<ul class="hypz">';
					html += '	<li class="clearfix"><span class="title">设备名称：</span>';
					html += '		<div class="li_r">';
					html += '			<input class="chang" name="updateDeviceid" readonly= "true" type="text" value="'+item.name+'"> <i>*</i> ';
					html += '		</div></li>';
					html += '	<li class="clearfix"><span class="title">配线图号：</span>';
					html += '		<div class="li_r">';
					html += '			<input class="chang" name="updatepxtcode" type="text" value="'+item.pxtcode+'"> <i>*</i>';
					html += '		</div></li>';
					
					html += '	<li class="clearfix" style="height:330px;"><span class="title">logo图片：</span>';
					html += '		<div class="li_r">';
					if(item.pxtimg == "" && item.pxttwoimg == undefined){
						html += "<td></td>";
					}else if(item.pxttwoimg == undefined){
						html += "<td><img src=\""+item.pxtimg+"\" style=\"width:50px;height:50px;\"/></td>";
					}else if(item.pxtimg != "" && item.pxttwoimg != undefined){
						html += "<td><img src=\""+item.pxtimg+"\" style=\"width:50px;height:50px;\"/><img src=\""+item.pxttwoimg+"\" style=\"width:50px;height:50px;\"/></td>";
					}
					html += '			<div id="update_fileUploadContent" class="fileUploadContent"></div>';
					html += '		</div>';
					html += '	</li>';
					
					html += '	<li class="clearfix"><span class="title">接线图号：</span>';
					html += '		<div class="li_r">';
					html += '			<input class="chang" name="updatejxtcode" type="text" value="'+item.jxtcode+'"> <i>*</i>';
					html += '		</div></li>';
					
					html += '	<li class="clearfix" style="height:330px;"><span class="title">logo图片：</span>';
					html += '		<div class="li_r">';
					if(item.jxtimg == "暂无图片" || item.jxtimg == null){
						html += "<td>"+item.jxtimg+"</td>";
					}else{
						html += "<td><img src=\""+item.jxtimg+"\" style=\"width:50px;height:50px;\"/></td>";
					}
					html += '			<div id="update_fileUploadContent1" class="fileUploadContent"></div>';
					html += '		</div>';
					html += '	</li>';
					
					html += '	<li class="tj_btn"><a href="javascript:void(0);" onclick="updatePjInfoInfo();">修改</a></li>';
					html += '</ul>';
					html += '</div>';
					html += '<script>';
					html += '	$("#update_fileUploadContent").initUpload({';
					html += '		"maxFileNumber":2,';
					html += '		"beforeUpload": beforeUpdateUploadFun,';
					html += '		"fileType": [\'png\', \'jpg\', \'jpeg\',\'gif\']';
					html += '	});';
					html += '	function beforeUpdateUploadFun(opt) {';
					html += '		opt.otherData = [{';
					html += '			"name": "name",';
					html += '			"value": "zxm"';
					html += '		}];';
					html += '	}';
					html += '	$("#update_fileUploadContent1").initUpload({';
					html += '		"maxFileNumber":1,';
					html += '		"beforeUpload": beforeUpdateUploadFun,';
					html += '		"fileType": [\'png\', \'jpg\', \'jpeg\',\'gif\']';
					html += '	});';
					html += '	function beforeUpdateUploadFun(opt) {';
					html += '		opt.otherData = [{';
					html += '			"name": "name",';
					html += '			"value": "zxm"';
					html += '		}];';
					html += '	}';
					html += '<\/script>';
					
					//打开弹框，显示
					index = layer.open({
						type: 1,
						title:'修改设备信息',
						area: ['600px', '500px'],
						shadeClose: true, //点击遮罩关闭
						content: html
					});
				}
			});
		}
	});
}

function updatePjInfoInfo(){
	var i;
	var uuid = $("#updateuuid").val();
	var pxtcode = $("input[name='updatepxtcode']").val();
	if(pxtcode == null || pxtcode == "" || pxtcode == undefined){
		//提示不能为空
		layer.alert("配线号不能为空!");
		return ;
	}
	var jxtcode = $("input[name='updatejxtcode']").val();
	if(jxtcode == null || jxtcode == "" || jxtcode == undefined){
		//提示不能为空
		layer.alert("配线号不能为空!");
		return ;
	}

	var form = new FormData();
	form.append('uuid',uuid);
    form.append('pxtcode',pxtcode);
    form.append('jxtcode',jxtcode);
    var opt = uploadTools.getOpt("update_fileUploadContent");
    var fileList = uploadFileList.getFileList(opt);
    var fileNumber = uploadTools.getFileNumber(opt);
    if(fileNumber>0){
    	form.append("pxtimg",fileList[0]);
    	form.append("pxtimg",fileList[1]);
    }
    var opt1 = uploadTools.getOpt("update_fileUploadContent1");
    //查看文件是否存在
    var fileList1 = uploadFileList.getFileList(opt1);
    var fileNumber1 = uploadTools.getFileNumber(opt1);
    if(fileNumber1>0){
    	form.append("jxtimg",fileList1[0]);
    }
    
	$.ajax({
		url:'${ctx}/pjinfo/updatePjInfo',
		data:form,
        type:'post',
        processData: false,
        contentType: false,
        cache: false,
        dataType:'html',
        beforeSend : function() {
			i = layer.open({
				type : 3,
				area : '500px',
				skin : 'layui-layer-molv',
				shade : 0.5,
				shadeClose : true,
				maxmin : true
			});
		},
		success:function(data){
			layer.close(i);
			if(data == "success"){
				layer.alert("修改成功!", function(){
					window.location.reload();
					parent.layer.close(index);
				});
			}
		}
	});
}
</script>
<script type="text/javascript">
//删除大学信息
function deletePjInfo(uuid){
	layer.confirm('确定要删除这条记录吗?',{icon: 3, title:'提示'}, function(index){
		$.ajax({
			url:'${ctx}/pjinfo/deletePjInfo',
			data:{"uuid":uuid},
			type:'post',
			dataType:'html',
			success:function(data){
				if(data == "success"){
					layer.alert("删除成功!", function(){
						window.location.reload();
						parent.layer.close(index);
					});
				}else if(data == "nopass"){
					layer.alert("没有权限添加,请联系管理员!");
				}else if(data == "error"){
					layer.alert("删除异常,请联系管理员!");
				}
			}
		});
	});
}
</script>
<script type="text/javascript">
function addPjInfo(){
	var i;
	var deviceid = $("select[name='device_name'] option:selected").val();
	 if(deviceid == null || deviceid == "" || deviceid == undefined){
		//提示不能为空
		layer.alert("设备名称不能为空!");
		return ;
	} 
	var pxtcode = $("input[name='pxtcode']").val();
	if(pxtcode == null || pxtcode == "" || pxtcode == undefined){
		//提示不能为空
		layer.alert("配线号不能为空!");
		return ;
	}
	var jxtcode = $("input[name='jxtcode']").val();
	if(jxtcode == null || jxtcode == "" || jxtcode == undefined){
		//提示不能为空
		layer.alert("接线号不能为空!");
		return ;
	}
	
	var form = new FormData();
    form.append('deviceid',deviceid);
    form.append('pxtcode',pxtcode);
    form.append('jxtcode',jxtcode);
    var opt = uploadTools.getOpt("fileUploadContent");
    //查看文件是否存在
    var fileList = uploadFileList.getFileList(opt);
    var fileNumber = uploadTools.getFileNumber(opt);
    if(fileNumber>0){
    	form.append("pxtimg",fileList[0]);
    	form.append("pxtimg",fileList[1]);
    }
    var opt1 = uploadTools.getOpt("fileUploadContent1");
    //查看文件是否存在
    var fileList1 = uploadFileList.getFileList(opt1);
    var fileNumber1 = uploadTools.getFileNumber(opt1);
    if(fileNumber1>0){
    	form.append("jxtimg",fileList1[0]);
    }
	$.ajax({
		url:'${ctx}/pjinfo/addPjInfo',
		data:form,
        type:'post',
        processData: false,
        contentType: false,
        cache: false,
        dataType:'html',
        beforeSend : function() {
			i = layer.open({
				type : 3,
				area : '500px',
				skin : 'layui-layer-molv',
				shade : 0.5,
				shadeClose : true,
				maxmin : true
			});
		},
		success:function(data){
			layer.close(i);
			if(data == "success"){
				layer.alert("添加成功!", function(){
					window.location.reload();
					parent.layer.close(index);
				});
			}else if(data == "nopass"){
				layer.alert("没有权限添加,请联系管理员!");
			}else if(data == "error"){
				layer.alert("添加异常,请联系管理员!");
			}
		}
	});
}
</script>
<div id="right_ctn" >
	<div class="right_m">
		<!--列表-->
		<div class="hy_list">
			<div class="box_t">
				<span class="name">设备列表</span>
				<!--当前位置-->
				<div class="position">
					<a href=""><img src="${ctx}/images/icon5.png" alt="" /></a> <a
						href="">首页</a> <span><img src="${ctx}/images/icon3.png"
						alt="" /></span> <a href="">设备管理</a> <span><img
						src="${ctx}/images/icon3.png" alt="" /></span> <a href="">设备列表</a>
				</div>
				<!--当前位置-->
			</div>
			
			<!--新建-->
			<form action="" method="post">
				<div class="xjhy" style="padding: 0px;" >
					<div class="tabBox_t">
						<div class="tabBox">
							<ul class="tabNav">
								<li class="now"><span>所有设备</span></li>
								<li><span>添加设备</span></li>
							</ul>
							<div class="tabCont" style="display: block;">
								<!--所有学校-->
								<ul class="hypz gjpz clearfix">
									<!--查询-->
									<div class="search">
										<span>按设备名称查询：</span>
										<div class="s_text">
											<input name="name" type="text">
										</div>
										<a href="javascript:void(0);" class="btn"
											onclick="getPjInfoByParamByName()">查询</a>
									</div>
									<!--查询-->
									<div class="space_hx">&nbsp;</div>
									<!--列表-->
									<form action="" method="post">
										<table cellpadding="0" cellspacing="0" class="list_hy" style="width:98%;">
											<tr>
												<th scope="col">设备名称</th>
												<th scope="col">配线号</th>
												<th scope="col">配线图</th>
												<th scope="col">接线号</th>
												<th scope="col">接线图</th>
												<th scope="col">操作</th>
											</tr>
											<tbody id="qrcodeInfo">
											</tbody>
										</table>
										<!--列表-->
										<!--右边底部-->
										<div class="r_foot">
											<div class="r_foot_m" id="r_foot_m">
											</div>
										</div>
									</form>
									<!--右边底部-->
								</ul>
								<!--所有权限-->
							</div>
							<div class="tabCont" style="">
								<!--添加权限-->
								<ul class="hypz">
									<li class="clearfix"><span class="title">设备名称：</span>
										<div class="li_r">
											<select name="device_name" lay-verify="">
												<option value="">请选择</option>
											</select> <i>*</i>
										</div></li>
									<li class="clearfix"><span class="title">配线号：</span>
										<div class="li_r">
											<input class="chang" name="pxtcode" type="text"> <i>*</i>
										</div></li>
									<!-- <li class="clearfix"><span class="title">学校简介：</span>
										<div class="li_r">
											<input class="chang" name="introduce" type="text"> <i>*</i>
										</div></li> -->
									<li class="clearfix" style="height:280px;"><span class="title">图片上传：</span>
										<div class="li_r">
											<div id="fileUploadContent" class="fileUploadContent"></div>
										</div>
									</li>
									<li class="clearfix"><span class="title">接线号：</span>
										<div class="li_r">
											<input class="chang" name="jxtcode" type="text"> <i>*</i>
										</div></li>
									<li class="clearfix" style="height:280px;"><span class="title">图片上传：</span>
										<div class="li_r">
											<div id="fileUploadContent1" class="fileUploadContent"></div>
										</div>
									</li>
									<li class="tj_btn"><a href="javascript:void(0);" onclick="addPjInfo();">添加</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
		<!--列表-->
	</div>
</div>
<script type="text/javascript">
	$("#fileUploadContent").initUpload({
		//"uploadUrl": "#", //上传文件信息地址
		//"size":350,//文件大小限制，单位kb,默认不限制
		"maxFileNumber":2,//文件个数限制，为整数
		//"filelSavePath":"",//文件上传地址，后台设置的根目录
		"beforeUpload": beforeUploadFun, //在上传前执行的函数
		//"onUpload":onUploadFun，//在上传后执行的函数
		//autoCommit:true,//文件是否自动上传
		"fileType": ['png', 'jpg', 'jpeg','gif'] //文件类型限制，默认不限制，注意写的是文件后缀
	});
	$("#fileUploadContent1").initUpload({
		//"uploadUrl": "#", //上传文件信息地址
		//"size":350,//文件大小限制，单位kb,默认不限制
		"maxFileNumber":1,//文件个数限制，为整数
		//"filelSavePath":"",//文件上传地址，后台设置的根目录
		"beforeUpload": beforeUploadFun, //在上传前执行的函数
		//"onUpload":onUploadFun，//在上传后执行的函数
		//autoCommit:true,//文件是否自动上传
		"fileType": ['png', 'jpg', 'jpeg','gif'] //文件类型限制，默认不限制，注意写的是文件后缀
	});
	function beforeUploadFun(opt) {
		opt.otherData = [{
			"name": "name",
			"value": "zxm"
		}];
	}
</script>